<template>
  <m-title style="margin-top: 30px">导航</m-title>
  <Alert type="warning" style="margin-top: 14px">以下网站（除个人文档）均来自于网络收集，如果涉及您的权益影响请联系我们及时更改或删除。</Alert>
  <content-area class="navigation-card" v-for="(navigation, gindex) in navigations"
                :title="`${ navigation.title }（共 ${ navigation.list.length } 个）`"
                :bordered="false" :key="navigation.title"
                dis-hover>
    <div class="navigation-list screen-container">
      <div class="navigation-item screen-item" v-for="(item, index) in navigation.list"
           :ref="`navigationItem${gindex}-${index}`"
           :key="item.title" :title="item.desc">
        <div class="navigation-item-box"
             :ref="`navigationItemBox${gindex}-${index}`"
             @mouseenter="handleNavigationFocus(gindex, index)" @mouseleave="handleNavigationOut(gindex, index)">
          <a :href="simpleUtils.toRedirectUrl(item.url)" target="_blank">
            <Row align="middle" :wrap="false">
              <m-icon class="navigation-item-icon" :name="item.icon"
                      style="margin-right: 6px; transform: translateY(-1px)" size="24"
                      :style="item.iconStyle || {}"
                      lazy></m-icon>
              <div class="navigation-item-content">
                <div class="title over-ellipsis">{{ item.title }}</div>
                <div class="desc over-ellipsis" :ref="`navigationDesc${gindex}-${index}`">{{ item.desc }}</div>
              </div>
            </Row>
          </a>
        </div>
        <div class="navigation-dialog" @mouseleave="handleNavigationLeave(gindex, index)"
             :style="{'viewTransitionName': `navigation`}"
             :ref="`navigationDialog${gindex}-${index}`">
          <div style="position: relative">
            <div class="navigation-dialog-head">
              <m-icon class="navigation-dialog-icon" :name="item.icon"
                      style="margin-right: 6px; transform: translateY(-1px)" size="40"
                      lazy></m-icon>
              <div class="title">{{ item.title }}</div>
            </div>

            <div class="navigation-dialog-content">
              <div class="desc" :style="{'viewTransitionName': `navigationDesc`}">
                {{ item.desc }}
              </div>
              <div class="synopsis">
                {{ item.synopsis }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </content-area>
</template>

<script>
import MTitle from "@/components/MTitle";
import ContentArea from "@/components/ContentArea";
import MIcon from "@/components/MIcon";
import navigations from "@/data/navigations";

export default {
  name: "NavigationComponent",
  components: {MIcon, ContentArea, MTitle},
  props: {
    searchKey: String
  },
  data() {
    return {
      navigationFocusTimer: null
    }
  },
  computed: {
    navigations() {
      const res = {};
      const searchKey = this.searchKey.toLowerCase();
      for (let k in navigations) {
        const navigation = navigations[k];
        if (navigation.title.toLowerCase().includes(searchKey)) {
          res[k] = navigation;
        } else if (navigation.list) {
          const filters = navigation.list.filter(item => item.title.toLowerCase().includes(searchKey) || item.desc.toLowerCase().includes(searchKey))
          if (filters && filters.length > 0) {
            let navigationTemp = {...navigation};
            navigationTemp.list = filters;
            res[k] = navigationTemp;
          }
        }
      }
      return res;
    }
  },
  methods: {
    handleNavigationFocus(gindex, index) {
      const navigationItemBox = this.$refs[`navigationItemBox${gindex}-${index}`][0];
      const navigationDialog = this.$refs[`navigationDialog${gindex}-${index}`][0];
      const navigationDesc = this.$refs[`navigationDesc${gindex}-${index}`][0];
      if (this.navigationFocusTimer) clearTimeout(this.navigationFocusTimer);
      this.navigationFocusTimer = setTimeout(() => {
        navigationItemBox.style.viewTransitionName = `navigation`
        navigationDesc.style.viewTransitionName = `navigationDesc`
        const vt = document.startViewTransition(() => {
          navigationDialog.style.display = 'block'
          navigationItemBox.style.display = 'none'
        })
        vt.finished.finally(() => {
          navigationDialog.classList.add('show')
          navigationItemBox.style.viewTransitionName = ''
          navigationDesc.style.viewTransitionName = ''
        })
      }, 1200)
    },
    handleNavigationLeave(gindex, index) {
      document.documentElement.classList.add('back')
      const navigationItemBox = this.$refs[`navigationItemBox${gindex}-${index}`][0];
      const navigationDialog = this.$refs[`navigationDialog${gindex}-${index}`][0];
      const navigationDesc = this.$refs[`navigationDesc${gindex}-${index}`][0];
      if (this.navigationFocusTimer !== null) clearTimeout(this.navigationFocusTimer);
      navigationItemBox.style.viewTransitionName = `navigation`
      navigationDesc.style.viewTransitionName = `navigationDesc`
      navigationDialog.classList.remove('show')
      const vt = document.startViewTransition(() => {
        navigationDialog.style.display = 'none'
        navigationItemBox.style.display = 'block'
      })
      vt.finished.finally(() => {
        navigationItemBox.style.viewTransitionName = ''
        navigationDesc.style.viewTransitionName = ''
        document.documentElement.classList.remove('back')
      })
    },
    handleNavigationOut(gindex, index) {
      if (this.navigationFocusTimer !== null) clearTimeout(this.navigationFocusTimer);
    },
  }
}
</script>

<style lang="scss" scoped>

.navigation-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.navigation-item {
  //flex: 1;
  //width: 260px;
  height: 50px;
  position: relative;
  border-radius: 4px;
  transition: all .2s;
  cursor: pointer;
  margin-bottom: 10px;

  .navigation-item-box {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 12px 14px;
    transition: all .2s;

    &:hover {
      box-shadow: 2px 4px 4px -2px rgba(0, 0, 0, .2);
      transform: scale(1.02) translate3d(-1px, -2px, 20px);
    }
  }

  .navigation-item-content {
    position: absolute;
    left: 46px;
    right: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .title {
    font-size: 14px;
    color: #515a6e;
  }

  .desc {
    font-size: 12px;
    color: #969696;
  }
}

.navigation-dialog {
  display: none;
  position: absolute;
  padding: 12px 14px;
  bottom: 0;
  left: -1px;
  width: calc(100% + 2px);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  height: 240px;
  overflow-y: auto;
  background-color: #ffffff;
  transition: all .3s;
  box-shadow: 2px 4px 4px -2px rgba(0, 0, 0, .2);
  //view-transition-name: navigation;
  //pointer-events: none;


  .navigation-dialog-head {
    display: flex;

    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .navigation-dialog-content {
    .desc {
      margin-top: 6px;
      font-size: 12px;
      font-weight: normal;
      color: #7a8b93;
      transition: all .8s;
    }

    .synopsis {
      display: none;
      margin-top: 6px;
      font-size: 12px;
      font-weight: normal;
      color: #7a8b93;
      animation: move-up .25s;
    }
  }

  &.show {
    .navigation-dialog-content {
      .synopsis {
        display: block;
      }
    }
  }
}
</style>

<style>
::view-transition-old(navigation) {
  animation: none;
  mix-blend-mode: normal;
  overflow: clip;
  width: 100%;
}

::view-transition-new(navigation) {
  /*animation: none;*/
  mix-blend-mode: normal;
  overflow: clip;
  width: 100%;
  animation: view-transition-open .25s ease;
}

::view-transition-new(navigation):hover {
  transform: none;
}

.back::view-transition-old(navigation) {
  mix-blend-mode: normal;
  overflow: clip;
  width: 100%;
  animation: view-transition-close .25s ease;
}

.back::view-transition-new(navigation) {
  mix-blend-mode: normal;
  overflow: clip;
  width: 100%;
  animation: view-transition-close-new .25s ease;
}

@keyframes view-transition-open {
  from {
    height: 50px;
    opacity: 0;
  }

  to {
    height: 240px;
    opacity: 1;
  }
}

@keyframes view-transition-close {
  from {
    height: 240px;
    opacity: 1;
  }

  to {
    height: 50px;
    opacity: 0;
  }
}

@keyframes view-transition-close-new {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
